<template>
  <div>
    <div class="lix-fed__container">
      <div class="lix-fed__title">{{ title }}:</div>
      <div class="lix-fed__content" @click="showCityPicker">
        <div>
          <input
            :value="value"
            :class="textClass"
            class="lix-fed__text"
            :placeholder="placeholder"
            :placeholder-class="placeholderClass"
            :disabled="inputDisabled"
            @input="onChange"
            @blur="onBlur"
            />
        </div>
        <div class="lix-fed__icon" v-if="isSelected && !isSwitched">
          <image src="../static/images/arrow_down.png" />
        </div>
        <div class="lix-fed__switch" v-if="isSwitched">
          <switch @change="onChange" :color="switchColor" :checked="checked"/>
        </div>
      </div>
    </div>
    <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onChange="onPickerChange" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
  </div>
</template>

<script>
import mpvueCityPicker from 'mpvue-citypicker';
export default {
  props: {
    componentId: null, // 标记组件 id
    type: 'text', // input类型
    title: '', // 左边 title
    placeholder: '', // input 占位文字
    value: null, // input value
    placeholderClass: 'lix-fed__placeholder', // 占位符的样式类
    textClass: '', // 文字样式类
    isSelected: false, // 是否需要地址选择
    isSwitched: false, // 是否是 switch 模式
    switchColor: '', // switch 控件颜色
    checked: false, // switch 控件是否选择
    inputDisabled: false // input 是否能使用
  },
  components: {
    mpvueCityPicker
  },
  data() {
    return {
      pickerValueDefault: [0, 0, 0]
      // scolor: 'red'
    };
  },
  methods: {
    showCityPicker() {
      if (!this.isSelected) {
        return;
      }
      this.$refs.mpvueCityPicker.show();
      console.log('Show city picker 1');
    },
    onChange(e) {
      const detail = e.mp.detail;
      detail['componentId'] = this.componentId;
      this.$emit('onChange', detail);
    },
    onBlur(e) {
      const detail = e.mp.detail;
      detail['componentId'] = this.componentId;
      this.$emit('onBlur', detail);
    },
    onPickerChange(e) {
      console.log(e);
    },
    onCancel(e) {
      console.log(e);
    },
    onConfirm(e) {
      console.log(e);
      e['componentId'] = this.componentId;
      this.$emit('onChange', e);
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/lix-field.scss";
</style>
